<template>
   <div style="height:750px">
    <div style="height:700px">
      <el-table
        :data="
          contents.slice((currentPage - 1) * pagesize, currentPage * pagesize)
        "
        :row-class-name="tableRowClassName"
        style="width: 100%"
        border
      >
        <el-table-column prop="olderNumber" label="工单号" width="140"></el-table-column>

        <el-table-column label="工单标题">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.title }}</span>
          </template>
        </el-table-column>

        <el-table-column label="工单详情" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.detail }}</span>
          </template>
        </el-table-column>

        <el-table-column label="客户名">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.customer }}</span>
          </template>
        </el-table-column>

        <el-table-column label="电话">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.tel }}</span>
          </template>
        </el-table-column>

        <el-table-column label="创建人">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.adminName }}</span>
          </template>
        </el-table-column>

        <el-table-column label="创建时间" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.time }}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="260" style="text-align:center">
          <template slot-scope="scope">
            <el-button size="mini" type="danger" @click="showRate(scope.row)">查看评价</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-dialog :visible.sync="dialogFormVisible">
        <div class="block" style="height:160px">
          <span class="demonstration">客户 {{form.customer}} 对您的评价：</span>
          <el-rate  v-model="form.score" :colors="colors"></el-rate>
          <span>客户的反馈：</span>
          <el-input type="textarea"  :disabled="true" :rows="2" placeholder="请输入内容" v-model="form.content"></el-input>
          <span>反馈时间：{{form.time}}</span>
          <el-button
            type="primary"
            style="float:right;margin-top:30px"
            @click="dialogFormVisible=false"
          >关闭</el-button>
        </div>
      </el-dialog>
    </div>

    <div class="yema">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        ::current-page-sync="currentPage"
        :page-sizes="[8, 10, 15]"
        :page-size="pagesize"
        layout="total,jumper,prev, pager, next,sizes"
        :total="contents.length"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      contents: [],
      currentPage: 1,
      pagesize: 8,
      state2: 0,
      problemstate: "",
      dialogFormVisible: false,
      username: this.$store.state.user.username,
      colors: ["#99A9BF", "#F7BA2A", "#FF9900"],
      form: {
        score: null,
        content: "",
        customer: "",
      },
    };
  },
  mounted() {
    this.showTables();
  },
  methods: {
    tableRowClassName({ rowIndex }) {
      if (rowIndex === 1) {
        return "warning-row";
      } else if (rowIndex === 3) {
        return "success-row";
      }
      return "";
    },
    showTables() {
      this.$axios({
        method: "get",
        params: {
          worker: this.username,
        },
        url: "/findAllWorkerOlders2",
      })
        .then((res) => {
          console.log(res);
          this.contents = res.data.result;
          var stateList = {
            0: "受理中",
            1: "工人处理中",
            2: "处理完毕",
          };
          for (const item of this.contents) {
            item.state = stateList[item.state];
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    handleSizeChange: function (size) {
      this.pagesize = size;
    },
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage;
    },
    showRate(row) {
      console.log(row);

      
      this.$axios({
        method: "get",
        params: {
          orderId: row.id,
        },
        url: "/feedBack/showRate",
      })
        .then((res) => {
          if (res.data.result == null) {
            this.$message.error("客户还未评价");
          } else {
            
            this.form = res.data.result;
              this.form.time = this.$moment( this.form.time).format("YYYY-MM-DD");
              this.dialogFormVisible = true;
            this.form.customer = row.customer;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style></style>
